{% extends 'frame.html' %}
{% block title %}Code Creator{% endblock %}

{% block navbar %}
<div class="mdui-appbar mdui-appbar-fixed mdui-shadow-1">
    <div class="mdui-toolbar mdui-color-white" style="height: 50px;">
      <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></a>
      <a href="javascript:;" class="mdui-typo-title"><strong>代码生成</strong> | Code Creator</a>
      <div class="mdui-toolbar-spacer"></div>
      <a id="re" href="javascript:;" onclick="location.reload();" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">refresh</i></a>
    </div>
    <div class="mdui-tab mdui-color-theme-accent" mdui-tab>
      <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">二维码 QRCode</a>
    </div>
</div>
{% endblock %}

{% block body %}

<style>
</style>

<div class="mdui-container mdui-m-t-5">
    <div class="mdui-row">

        <div class="mdui-col-xs-12 mdui-col-sm-7 mdui-col-md-8">
            <div class="mdui-card mdui-m-t-3">
                <div class="mdui-card-content">
                    <div class="mdui-textfield" style="width: 100%;">
                        <textarea id="input" class="mdui-textfield-input" placeholder="Data" maxlength="500"></textarea>
                    </div>
                    <button onclick="Create();" id="done" mdui-dialog="{target: '#show}" class="mdui-btn mdui-color-theme-accent mdui-btn-dense mdui-ripple mdui-float-left mdui-m-b-3">创建</button>
                </div>
            </div>
        </div>

        <div class="mdui-col-xs-12 mdui-col-sm-5 mdui-col-md-4">
            <div class="mdui-card mdui-m-y-3">
                <div id="in" class="">
                    <img id="img" class="mdui-img-rounded mdui-center" src=""/>
                    <div class="mdui-typo"><hr/></div>
                    <div class="mdui-row-xs-2">
                        <div class="mdui-col">
                          <button onclick="" class="mdui-btn mdui-btn-block mdui-color-theme-accent mdui-ripple"><i class="mdui-icon material-icons">save</i>保存</button>
                        </div>
                        <div class="mdui-col">
                            <button onclick="DownloadIamge('img', 'QRCode');" class="mdui-btn mdui-btn-block mdui-color-white mdui-ripple"><i class="mdui-icon material-icons">file_download</i>下载</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<script
  src="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/js/mdui.min.js"
  integrity="sha384-gCMZcshYKOGRX9r6wbDrvF+TcCCswSHFucUzUPwka+Gr+uHgjlYvkABr95TCOz3A"
  crossorigin="anonymous"
></script>
<script>
    function AutoImg(){
            document.getElementById("img").setAttribute("style", "")
            var Width = String(document.getElementById("in").clientWidth);
            var Img = String(document.getElementById("img").clientWidth);
            var data = "transform: scale(" + String(Width / Img) + ");";
            var data = "width:" + Width + "px;height:" + Width + "px;";
            document.getElementById("img").setAttribute("style", data)
    }
    function Create() {
        var data = "data=" + document.getElementById("input").value;
        var xmlhttp;
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        } else {
            xmlhttp = new ActiveXObject('Microsoft.XMLHttp');
        }
        xmlhttp.onreadystatechange = function() {
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var res = xmlhttp.responseText;
                document.getElementById("img").setAttribute("src", res);
                AutoImg();
                window.onresize = AutoImg;
            }
        }
        xmlhttp.open('POST', '/api/qrcode', true);
        xmlhttp.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded" );
        xmlhttp.send(data);
    }
    function DownloadIamge(id, name) {
        var img = document.getElementById(id)
        var url = img.src
        var a = document.createElement('a')
        var event = new MouseEvent('click')
        a.download = name
        a.href = url
        a.dispatchEvent(event)
    }
    Create();
</script>

{% endblock %}